import React, { Component } from 'react'
import { Button } from 'antd-mobile'
import { NavBar } from 'components'
import './index.less'
import { post } from '../../utils'

export default class WeChatLogin extends Component<any, any> {

    public state = {
        isRelation: true
    }

    public render(): JSX.Element {
        const { wxInfo } = this.props
        return (
            <div className="weChatRelation">
                <div className="weChatRelation_NavBar">
                    <div className="weChatRelation_NavBar_conent">
                        <NavBar divider={false} title={<div className="weChatRelation_NavBar_title">授权登录</div>}/>
                    </div>
                </div>
                {wxInfo.isLogin ? this.getRelation() : this.getAuthorize()}
            </div>
        )
    }
    private getRelation = () => {
        const { wxInfo } = this.props
        return (
            <React.Fragment>
                <div className="weChatRelation_logo">
                    <img src={require('../../assets/logo_grey.png')} />
                </div>
                <div className="weChatRelation_accountInfo">
                    <p>{wxInfo.user}</p>
                    <p>您的微信账号已绑定以上中恒账号是否直接登录？</p>
                </div>
                <div className="weChatRelation_btnWrap">
                    <div>
                        <Button
                            type="primary"
                            className="weChatRelation_btn weChatRelation_btn_bgcRed"
                            activeStyle={false}
                            onClick={this.handleLogin}
                        >
                            确定
                        </Button>
                    </div>
                    <div>
                        <Button
                            onClick={() => { this.props.history.push('/loginMode/login') }}
                            type="primary"
                            className="weChatRelation_btn weChatRelation_btn_bgcWhite"
                            activeStyle={false}
                        >
                            使用其他账号登录
                        </Button>
                    </div>
                </div>
            </React.Fragment>
        )
    }
    private getAuthorize = () => {
        const { wxInfo } = this.props
        return (
            <React.Fragment>
                <div className="weChatAuthorize_logo">
                    <img src={wxInfo.ico} />
                </div>
                <div className="weChatAuthorize_accountInfo">
                    <p>亲爱的用户：{wxInfo.user}</p>
                    <p>为了给您更好的服务，请关联一个中恒账号</p>
                </div>
                <div className="weChatAuthorize_btnWrap">
                    <div>
                        <p>已有中恒账号？</p>
                        <Button
                            type="primary"
                            className="weChatAuthorize_btn weChatAuthorize_btn_bgcRed"
                            activeStyle={false}
                            onClick={this.handleRelation}
                        >
                            立即关联
                        </Button>
                    </div>
                    <div>
                        <p>还没有中恒账号？</p>
                        <Button
                            type="primary"
                            className="weChatAuthorize_btn weChatAuthorize_btn_bgcWhite"
                            activeStyle={false}
                            onClick={() => { this.props.history.push('/loginMode/userRegister') }}
                        >
                            立即注册
                        </Button>
                    </div>
                </div>
            </React.Fragment>
        )
    }
    private handleRelation = () => {
        const { history } = this.props
        history.push('/loginMode/login?type=wx')
    }

    private handleLogin = () => {
        const { wxInfo, SET_USER_INFO, history } = this.props
        post('usersapi/confirmAuth', {
            wx_openid: wxInfo.wx_openid
        }).then((data: any) => {
            SET_USER_INFO(data)
            history.go(-3)
        })
    }
}